<template>
  <div>
    <!-- 轮播图 -->
    <view class='carousel'> 
     <swiper class='carousel_swiper' indicator-dots="true" indicator-color="#f4f4f4" indicator-active-color="#4eb8b8" autoplay="true" interval='2000' circular='true'>
    <block v-for="(item, index) in active" :key='index'>
      <swiper-item bindtap='chomeCarouselClick' >
        <image wx:if='item.img' class="carouselImg" :src='item.img' mode='aspectFill' ></image>
      </swiper-item>
    </block>
  </swiper>
 </view>
 <!-- 热门推荐 -->
  <div class='hot'>
   <p>
     热门推荐
   </p>
  <!-- 商品 -->
  <view class="list">
    <view class='list-half' >
      <view v-for="(item, index) in listData" :key='index'  class='card' @tap="toGoodsDetail(item.id)">
        <image :src='item.img' mode="widthFix"></image>
        <div class="text">
          <div class="gods flex">
            {{item.name}}
          </div>
          <div class="gods-de flex">
            商品规格：{{item.specs}}
          </div>
          <div class="gods-de flex">
            价格：￥{{item.price}}
          </div>
         </div>   
       </view>
     </view>
   </view>
  </div>
  
</div>
</template>

<script>
import card from '@/components/card'

export default {
  data () {
    return {
      listData: [],
      active: []
    }
  },
  beforeMount () {
    var that = this
    // 云函数调用show,获取数据
    wx.cloud.callFunction({
      name: 'show',
      data: {
        name: ''
      },
      success (res) {
        that.listData = res.result.data
      },
      fail (res) {
        console.log(res)
      }
    })
    wx.cloud.database({env: 'text-17tek'}).collection('active').get({
      success: res => {
        that.active = res.data
      },
      fail: console.error
    })
  },
  onPullDownRefresh: function () {
    var that = this
    wx.showNavigationBarLoading()
    setTimeout(function () {
      wx.hideNavigationBarLoading()
      wx.stopPullDownRefresh()
    }, 1000)
    wx.cloud.callFunction({
      name: 'show',
      data: {
        name: ''
      },
      success (res) {
        that.listData = res.result.data
        console.log(that.listData)
      },
      fail (res) {
        console.log(res)
      }
    })
    console.log(this.listData)
  },

  components: {
    card
  },
  methods: {
    toGoodsDetail (id) {
      wx.navigateTo({
        url: '../../pages/goodsdetail/main?id=' + id
      })
    }
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
page { 
  background-color: #f4f4f4;
}
/* 轮播图样式 */
.carousel{
  width: 100%;
}
.carousel_swiper{
  width: 100%;
  height: 350rpx;
  display: block;
  position: relative;
  background: #f4f4f4;
}
.carouselImg{
  width: 100%;
  height: inherit;
}
/* 热门推荐样式 */
.hot{
  margin: 50rpx 10rpx 20rpx 10rpx;
  text-align: center;
}
/* 瀑布流商品样式 */
.list {
   width: 100%;
   margin-top: 10rpx;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
 
.list .list-half {
  width: 96%;
  column-count: 2;
  column-gap: 20px;
}
.list-half .card {
  display:inline-block;
  background-color: #fff;
  overflow: hidden;
  margin-bottom: 50rpx;
  border: 1rpx solid gray;
  width: 290rpx;
  
}
.card image{
  width: 100%;
}
.gods{
  font-family: SimHei;
  font-size: 40rpx;
}
.gods-de{
  margin-top: 10rpx;
  font-size: 30rpx;
  font-family: Microsoft YaHei;
}
/* 全局flex样式 */
.flex{
   display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
